<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/UploadImg.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }
        .fileBtn {
            width: 1rem;
            height: 1rem;
            border: 0.01rem solid #d3d3d3;
            text-align: center;
            position: relative;
             left: 0rem;
            /* right: 0; */
            display: flex;
            /* top: 0; */
            /* justify-content: space-between; */
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body style="background-color: #ffffff;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1 mui-action-back"><a><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">手机淘宝任务（Q-垫付-未-待操作）</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->


<!--Merchant merchandise begin-->
<article class="merchant-merchandise height-padding">
    <div class="businessId">商家ID:<span id="shopId">117987</span></div>
    <main>
        <div><img id="goodsPic" src="images/img_commodity.png"></div>
        <aside>
            <div>商品目标：<span>平台返款</span></div>
            <div>搜索展示价格 <span id="searchPrice"></span>元</div>
            <div>数量：<span id="itemNum"></span>件</div>
        </aside>
    </main>
</article>
<!--Merchant merchandise end-->

<!--taoBao task shop notes beg*in-->
<article class="task-remark">
    <aside>
        <section>
            <div><img src="images/img_taobao.png"></div>
            <div>淘宝任务:<span>待操作</span></div>
        </section>
        <div class="time-of-submission">提交时间：01:50:40</div>
    </aside>
    <main>
        <div><p>商家备注(长按课选择-复制)要求:</p></div>
        <div id="remarkInfo">
            不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了不要bibi了
        </div>
    </main>
</article>
<!--taoBao task shop notes end-->


<!--accept an assignment begin-->
<article class="accept-an-assignment">
    <section class="task-top">
        <div>
            <img src="images/icon_one.png">
            <p>接受任务</p>
        </div>
        <time datetime="2018-10-20 &nbsp; 11:55:55" id="time1"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>任务编号</p>
            <p id="Mid">2345254</p>
        </div>
        <div>
            <p>买号</p>
            <p>淘宝账号</p>
        </div>
        <div>
            <p>商品金额</p>
            <p id="dianfuCount"></p>
            
        </div>
    </section>
</article>
<!--accept an assignment end-->

<!-- operating duty begin-->
<article class="operating-duty">
    <section class="task-top">
        <div>
            <img src="images/icon_two.png">
            <p>操作任务</p>
        </div>
    </section>
    <div class="list-img1">
        <!--<div>搜索列表</div>-->
        <div class="upload-img-person">
        	 
            <ul>
                <div class="upload-title">
                    <p>搜索页面&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        <div class="fileBtn">
                            <p id="imgliaotianjiemianp">+</p>
                            <input id="fileBtn" type="file" onchange="upload();" accept="image/*" capture="camera"
                                   multiple="multiple"/>
                            <!--单张图片容器-->
                            <img id="imgliaotianjiemian"/>
                            
                        </div>
                </div>
            </ul>
            <ul>
                    <div class="upload-title">
                        <p>浏览店铺&nbsp;&nbsp;&nbsp;&nbsp;</p>
                        <article>

                            <div class="fileBtn">
                                <p id="imgliulandianpu1p">+</p>
                                <input id="fileBtn1" type="file" onchange="upload1();" accept="image/*" capture="camera"
                                       multiple="multiple"/>
                                <!--单张图片容器-->
                                <img src="" id="imgliulandianpu1"/>
                            </div>

                        </article>
                        <article>

                            <div class="fileBtn">
                                <p id="imgliulandianpu2p">+</p>
                                <input id="fileBtn2" type="file" onchange="upload2();" accept="image/*" capture="camera"
                                       multiple="multiple"/>
                                <!--单张图片容器-->
                                <img src="" id="imgliulandianpu2"/>
                            </div>

                        </article>
                        <article>

                            <div class="fileBtn">
                                <p id="imgliulandianpu3p">+</p>
                                <input id="fileBtn4" type="file" onchange="upload4();" accept="image/*" capture="camera"
                                       multiple="multiple"/>
                                <!--单张图片容器-->
                                <img src="" id="imgliulandianpu3"/>
                            </div>

                        </article>
                        <article>

                            <div class="fileBtn">
                                <p id="imgliulandianpu4p">+</p>
                                <input id="fileBtn5" type="file" onchange="upload5();" accept="image/*" capture="camera"
                                       multiple="multiple"/>
                                <!--单张图片容器-->
                                <img src="" id="imgliulandianpu4"/>
                            </div>

                        </article>

                    </div>
            </ul>
            <ul>
                <div class="upload-title">
                    <p>货比三家&nbsp;&nbsp;&nbsp;&nbsp;</p>
                    <div class="fileBtn">
                        <p id="imghuobisanjiap">+</p>
                        <input id="fileBtn06" type="file" onchange="upload06();" accept="image/*" capture="camera"
                               multiple="multiple"/>
                        <!--单张图片容器-->
                        <img src="" id="imghuobisanjia"/>
                    </div>
                </div>
            </ul>
            <!--<ul>
                <div class="upload-title">
                    <p>收藏加购&nbsp;&nbsp;&nbsp;&nbsp;</p>
                    <article>

                        <div class="fileBtn">
                            <p>+</p>
                            <input id="fileBtn07" type="file" onchange="upload07();" accept="image/*" capture="camera"
                                   multiple="multiple"/>
                          
                            <img src="" id="img07"/>
                        </div>

                    </article>
                    <article>

                        <div class="fileBtn">
                            <p>+</p>
                            <input id="fileBtn08" type="file" onchange="upload08();" accept="image/*" capture="camera"
                                   multiple="multiple"/>
                        
                            <img src="" id="img08"/>
                        </div>

                    </article>

                </div>
            </ul>-->
            <ul>
                <div class="upload-title">
                    <p>下单&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                    <div class="fileBtn">
                        <p id="imgxiadanp">+</p>
                        <input id="fileBtn09" type="file" onchange="upload09();" accept="image/*" capture="camera"
                               multiple="multiple"/>
                        <!--单张图片容器-->
                        <img src="" id="imgxiadan"/>
                    </div>
                </div>
            </ul>
        </div>
    </div>

</article>
<!-- operating duty end-->


<!--Business confirmation begin-->
<article class="accept-an-assignment business-confirmation">
    <section class="task-top">
        <div>
            <img src="images/icon_three.png">
            <p>商家确认</p>
        </div>
        <time datetime="2018-10-20 &nbsp; 11:55:55" id="time2"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>返款方式</p>
            <p>平台返款</p>
        </div>
        <div>
            <p>返款账号</p>
            <p id="userNum"></p>
        </div>
        <div>
            <p>商品金额</p>
            <p id="shangpinjine2">元</p>
        </div>
        <div class="refunds">
            <p>平台规定商家26小时内返款</p>
        </div>
        <div class="urge-refunds">
            <a href="#">催返款</a>
        </div>
    </section>
</article>
<!--Business confirmation end-->


<!--  collect-goods begin-->
<article class="operating-duty accept-an-assignment collect-goods">
    <section class="task-top">
        <div>
            <img src="images/icon_four.png">
            <p>收到好评</p>
        </div>
    </section>
    <section class="list-img1">
        <div>

            <aside>
                <div class="upload-img-person">
                    <ul>
                        <div class="upload-title">
                            <p>物流签收与收到好评截图</p>
                            <article>

                                <div class="fileBtn">
                                    <p>+</p>
                                    <input id="fileBtn010" type="file" onchange="upload010();" accept="image/*" capture="camera"
                                           multiple="multiple"/>
                                    <!--单张图片容器-->
                                    <img src="" id="img010"/>
                                </div>

                            </article>
                            <article>

                                <div class="fileBtn">
                                    <p>+</p>
                                    <input id="fileBtn011" type="file" onchange="upload011();" accept="image/*" capture="camera"
                                           multiple="multiple"/>
                                    <!--单张图片容器-->
                                    <img src="" id="img011"/>
                                </div>

                            </article>

                        </div>
                    </ul>
                </div>
            </aside>
        </div>
    </section>
    <section class="serial-number">
        <div class="refunds">
            <p id="hptype">此单为普通好评</p>
        </div>
        <div class="urge-refunds">
            <a href="#" style="background: #F4F4F4; color: #202020;">去评价</a>
        </div>
    </section>
</article>
<!--  collect-goods end-->

<!--Mission accomplished begin-->
<article class="mission-accomplished accept-an-assignment">
    <section class="task-top">
        <div>
            <img src="images/icon_five.png">
            <p>任务完成</p>
        </div>
        <time datetime="2018-10-20&nbsp;11:55:55" id="time3"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>获取佣金</p>
            <p id="shangpinjine3">570元</p>
        </div>
    </section>
</article>
<!--Mission accomplished end-->


<!--taskTabBar begin-->
<article class="taskTabBar">
    <div onclick="Operationaltask()">操作任务</div>
    <div onclick="pageJump(this)" name="appealTask">申诉任务</div>
    <div onclick="pageJump(this)" name="cancelTask">取消任务</div>
</article>
<!--taskTabBar end-->


<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/UploadImg.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/config.js"></script>
<script src="js/ss.js"></script>
	
<script>
	$(document).ready(function(){
		mui.plusReady(function(){
			var m = localStorage.getItem("havepandingId");
			console.log(m)
			if(m){
				sessionStorage.setItem("havepandingId",m);
			}
			console.log(sessionStorage.getItem("havepandingId"))
			$.ajax({
				url:"/api/order/getOrderById",
				data:{orderId:sessionStorage.getItem("havepandingId")},
				success: function(data){
					$("#shopId").text(data.data.shopId);
					$("#phonePrice").text("搜索展示价格："+data.data.phonePrice);
					$("#goods1ItemNum").text(data.data.goods1ItemNum+"件");
					$("#remarkInfo").html(data.data.remarkInfo);
					
					$("#Mid").text(data.data.id);
					$("#time1").text(data.data.ct);
					$("#dianfuCount").text(data.data.dianfuCount+"元")
					$("#imgliaotianjiemian").attr("src",function(){
						$("#imgliaotianjiemianp").text("");
						return "http://tbk.tutew.com/"+data.data.searchResultPic	
					})
					$("#imgliulandianpu1").attr("src",function(){
						$("#imgliulandianpu1p").text("");
						return "http://tbk.tutew.com/"+data.data.shopGoodsPic1	
					})
					$("#imgliulandianpu2").attr("src",function(){
						$("#imgliulandianpu2p").text("");
						return "http://tbk.tutew.com/"+data.data.shopGoodsPic2	
					})
					$("#imgliulandianpu3").attr("src",function(){
						$("#imgliulandianpu3p").text("");
						return "http://tbk.tutew.com/"+data.data.targetGoodsHeaderPic	
					})
					$("#imgliulandianpu4").attr("src",function(){
						$("#imgliulandianpu4p").text("");
						return "http://tbk.tutew.com/"+data.data.targetGoodsFooterPic	
					})
					$("#imghuobisanjia").attr("src",function(){
						$("#imghuobisanjiap").text("");
						return "http://tbk.tutew.com/"+data.data.anyGoodsPic1	
					})
					$("#imgxiadan").attr("src",function(){
						$("#imgxiadanp").text("");
						return "http://tbk.tutew.com/"+data.data.chatPic	
					})
					$("#userNum").text(function(){
						return JSON.parse(plus.storage.getItem('user')).bankNum
					})
					$("#shangpinjine2").text(data.data.dianfuCount+"元");
					$("#time2").text(data.data.ct);
					$("#time3").text(data.data.ct);
					$("#shangpinjine3").text(data.data.dianfuCount+"元");
					$("#hptype").text(function(){
						if(data.data.hpType == 1)return "此单为：普通好评";
	        			if(data.data.hpType == 2)return "此单为：文字好评";
	        			if(data.data.hpType == 3)return "此单为：图片好评";
	        			if(data.data.hpType == 4)return "此单为：视频好评";
					})
					
				}
			})
		})
	})
</script>

<script>

    //时分秒倒计时方法（封装的，直接拿来调用，data-timer只是传这个时间数据就行了）
    function timer(eleId,time) {
        var element = document.getElementById(eleId);
        if (element) {
            if (time > 0) {
                var hh = parseInt(time / 1000 / 60 / 60 % 24, 10);
                var mm = parseInt(time / 1000 / 60 % 60, 10);
                var ss = parseInt(time / 1000 % 60, 10);
                hh = hh < 10 ? ("0" + hh) : hh;   //时
                mm = mm < 10 ? ("0" + mm) : mm;   //分
                ss = ss < 10 ? ("0" + ss) : ss;   //秒
                document.getElementById("timer_h").innerHTML = hh;
                document.getElementById("timer_m").innerHTML = mm;
                document.getElementById("timer_s").innerHTML = ss;
                setTimeout(function () {
                    timer(eleId,time-1000);
                }, 1000);
            } else {
                document.getElementById("timer_h").innerHTML = '00';
                document.getElementById("timer_m").innerHTML = '00';
                document.getElementById("timer_s").innerHTML = '00';
            }
        }
    }
	
	mui.plusReady(function(){
		plus.nativeUI.alert('请完全按照商家要求操作，确保每一步操作都间隔足够时间，不按要求操作的，平台有权封停账号',function(){}, '注意', '确定' )
		//关闭等待框
		plus.nativeUI.closeWaiting();
		//显示当前页面
		mui.currentWebview.show();
		var param = JSON.parse(plus.webview.currentWebview().param)

		var data = param.task
		//数据绑定
		$('#shopId').html(data.shopId)
		$('#goodsPic').attr('src','http://tbk.tutew.com/'+data.goods1Pic)
		$('#searchPrice').html(data.phonePrice)
		$('#itemNum').html(data.goods1ItemNum)
		$('#remark').html(data.orderMsg?data.orderMsg:'无要求'),
		$('#taskId').html(data.id)
		$('#price').html(data.goods1RealPrice)
		//获取倒计时
		ajax({
			url: '/api/order/countdown/'+1,//param.order,
			type: 'post'
		}).then(function(res) {
			console.log(res.data)
			timer('timer',res.data*1000)
		}).catch(function(e){
			console.log(JSON.stringify(e))
		})
	})

</script>
	
<script>
	function Operationaltask(){
		$.ajax({
			url:"/api/order/operation",
			type: 'post',
			data:{orderId:sessionStorage.getItem("havepandingId")},
			success: function(data){
				location.replace("operationTask_advance.html")
			},
			errror: function(error){
				console.log('error')
			}
		})
	}
</script>

<script>
    /*window.onload = function () {
        alert("注意：请安全按照商家要求操作，确保每一步操作都间隔足够时间，不按照要求操作的，平台有权封停账号");
    }*/
</script>

<script>
	function pageJump(dom){
		var name = $(dom).attr('name')
		mui.openWindow({
			url: name+".html",
			id: name
		})
	}
</script>

</body>
</html>